<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Tab.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Tab.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function($) {
	&quot;use strict&quot;;

	/**
	 * KoalaUI的Tab组件，基于Bootstrap Tab改良，增加Close
	 * @class Tab
	 * @constructor
	 * @example
	 * 	&lt;div class=&quot;bs-example bs-example-tabs&quot;&gt;
			&lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot;&gt;
		    	&lt;li class=&quot;active&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#home&quot;&gt;主页&lt;/a&gt;&lt;/li&gt;
		    	&lt;li class=&quot;&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#user_manage&quot;&gt;用户管理&lt;i class=&quot;icon-remove tab-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
		    	&lt;li class=&quot;&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#role_manage&quot;&gt;角色管理&lt;i class=&quot;icon-remove tab-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
		    	&lt;li class=&quot;&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#resource_manage&quot;&gt;资源管理&lt;i class=&quot;icon-remove tab-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
		    
			&lt;/ul&gt;
			&lt;div class=&quot;tab-content&quot; id=&quot;myTabContent&quot;&gt;
		    	&lt;div id=&quot;home&quot; class=&quot;tab-pane fade active in&quot;&gt;
		      		测试主页内容
		      		&lt;button id=&quot;btnCloseRM&quot; class=&quot;btn btn-success&quot;&gt;关闭角色管理&lt;/button&gt;
		    	&lt;/div&gt;
		    	&lt;div id=&quot;user_manage&quot; class=&quot;tab-pane fade&quot;&gt;
		      		TEST
		    	&lt;/div&gt;
		    	&lt;div id=&quot;role_manage&quot; class=&quot;tab-pane fade&quot;&gt;
		      		这个是角色管理页面
		    	&lt;/div&gt;
		    	&lt;div id=&quot;resource_manage&quot; class=&quot;tab-pane fade&quot;&gt;
		      		这个是内容管理页面.......
		    	&lt;/div&gt;
		  	&lt;/div&gt;
		&lt;/div&gt;
	 */
	var Tab = function(element) {
		this.element = $(element);
	};

	Tab.prototype = {
		constructor : Tab,
		
		/**
		 * 显示某一个Tab的方法
		 * @method show
		 * @example
		 * 	$(&#x27;#myTab a&#x27;).click(function (e) {
			  e.preventDefault()
			  $(this).tab(&#x27;show&#x27;)
			})
		 */
		show : function() {
			var $this = this.element;
			var $ul = $this.closest(&#x27;ul:not(.dropdown-menu)&#x27;);
			var selector = $this.attr(&#x27;data-target&#x27;);

			if (!selector) {
				selector = $this.attr(&#x27;href&#x27;);
				selector = selector &amp;&amp; selector.replace(/.*(?=#[^\s]*$)/, &#x27;&#x27;); // strip
			}

			if ($this.parent(&#x27;li&#x27;).hasClass(&#x27;active&#x27;))
				return

			var previous = $ul.find(&#x27;.active:last a&#x27;)[0];
			var e = $.Event(&#x27;show.koala.tab&#x27;, {
				relatedTarget : previous
			});

			$this.trigger(e);

			if (e.isDefaultPrevented())
				return
			var $target = $(selector);
			this.activate($this.parent(&#x27;li&#x27;), $ul);
			this.activate($target, $target.parent(), function() {
				$this.trigger({
					type : &#x27;shown.koala.tab&#x27;,
					relatedTarget : previous
				});
			});
		},
		
		/**
		 * 新增的关闭方法，原先的Bootstrap没有关闭功能
		 * @method close
		 * @example
		 * 	$(&quot;#btnCloseRM&quot;).click(function(){
				$(&quot;[href=&#x27;#role_manage&#x27;]&quot;).tab(&quot;show&quot;).tab(&quot;close&quot;);
			})
		 */
		close:function(){
			var $this = this.element;
			var $thisLi = $this.parent();				//获得li
			//防止鼠标未移到对应的标签，让其未激活就去掉，必须要先激活状态才能去掉
			if(!$thisLi.hasClass(&quot;active&quot;)){
				return ;
			}
			var $thisPane = $($this.attr(&quot;href&quot;));
			var $nextLi = $thisLi.next();
			//如果关掉的是最后一个，第一个li为激活
			if(!$nextLi.length){
				$nextLi = $thisLi.prev();
				if(!$nextLi.length){
					$nextLi = $thisLi.parent().find(&quot;:first-child&quot;);
				}
			}
			var $nextPane = $($nextLi.children(&quot;a&quot;).attr(&quot;href&quot;));
			
			$thisLi.remove();
			$thisPane.remove();
			$nextLi.addClass(&quot;active&quot;);
			$nextPane.addClass(&quot;active&quot;).addClass(&quot;in&quot;);
//			console.info($this.html());
//			console.info($thisLi.html());
//			console.info($thisPane.html());
//			console.info($nextLi.html());
//			console.info($nextPane.html());
		},
	};

	Tab.prototype.activate = function(element, container, callback) {
		var $active = container.find(&#x27;&gt; .active&#x27;);
		var transition = callback &amp;&amp; $.support.transition
				&amp;&amp; $active.hasClass(&#x27;fade&#x27;);

		function next() {
			$active.removeClass(&#x27;active&#x27;).find(&#x27;&gt; .dropdown-menu &gt; .active&#x27;)
					.removeClass(&#x27;active&#x27;);

			element.addClass(&#x27;active&#x27;);

			if (transition) {
				element[0].offsetWidth;
				element.addClass(&#x27;in&#x27;);
			} else {
				element.removeClass(&#x27;fade&#x27;);
			}

			if (element.parent(&#x27;.dropdown-menu&#x27;)) {
				element.closest(&#x27;li.dropdown&#x27;).addClass(&#x27;active&#x27;);
			}

			callback &amp;&amp; callback();
		}

		transition ? $active.one($.support.transition.end, next)
				.emulateTransitionEnd(150) : next();

		$active.removeClass(&#x27;in&#x27;);
	};

	// TAB PLUGIN DEFINITION
	// =====================

	var old = $.fn.tab;

	$.fn.tab = function(option) {
		return this.each(function() {
			var $this = $(this);
			var data = $this.data(&#x27;koala.tab&#x27;);

			if (!data)
				$this.data(&#x27;koala.tab&#x27;, (data = new Tab(this)));
			if (typeof option == &#x27;string&#x27;)
				data[option]();
		});
	};

	$.fn.tab.Constructor = Tab;

	// TAB NO CONFLICT
	// ===============

	$.fn.tab.noConflict = function() {
		$.fn.tab = old;
		return this;
	};

	// TAB DATA-API
	// ============

	$(document).on(&#x27;click.koala.tab.data-api&#x27;,&#x27;[data-toggle=&quot;tab&quot;], [data-toggle=&quot;pill&quot;]&#x27;, function(e) {
		e.preventDefault();
		$(this).tab(&#x27;show&#x27;);
	});

	$(document).on(&#x27;click.koala.tab.data-api&#x27;,&#x27;[data-toggle=&quot;tab&quot;] .tab-close&#x27;, function(e) {
		e.preventDefault();
		$(this).parent().tab(&#x27;close&#x27;);
	});

}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
